<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格-列表</title>
<link href="<%=path %>/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=path %>/third/jqGrid_4.8.2/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/common.js"></script>
<script  type="text/javascript" src="<%=path %>/third/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=path %>/third/layer-v1.9.3/layer.js"></script>
<style type="text/css">
.addUsertablelist{
    border:solid 1px #cbcbcb; 
    width:100%; 
    clear:both;}
.addUsertablelist th{
    height:34px; line-height:34px; 
    border-bottom:solid 1px #b6cad2; 
    text-indent:11px; 
    text-align:center;}
.addUsertablelist td{
    line-height:35px; 
    text-indent:11px; 
    border-right: dotted 1px #c7c7c7;}
.tablelinkdelete1{color:red;}
.selectedUsers{
   font-weight:bold;
   float:left; 
   margin-left:12px
}
.newbtn{
  width:85px;
  height:35px; 
  background:url(../images/btnbg.png) no-repeat; 
  font-size:14px;
  font-weight:bold;
  color:#fff; 
  cursor:pointer;
   float:right;
   margin-right:12px;
   margin-top:12px;
   }
.newdiv{
   font-size:14px;
   margin-right:12px;
   margin-left:12px;
   margin-top:12px;
 }
 .unSelectedUsers{
   font-weight:bold;
   font-family : 微软雅黑,宋体;
   margin-left:25%;
   line-height:330px;
   text-align:center;
   font-size:18px;
   color:#ccc
}
</style>
<!-- $(this).find("#addUser").css("color","blue").text("已选择");	 -->

<script type="text/javascript">
$(function(){		
	//选择全部选项
	  $("#selectAll").click(function(){	
		  if($(this).is(":checked")){
		//	$("input[type=checkbox]").prop("checked",true);	  
		//	$("tr").not(":eq(0)").each(function(){
			$("#tab").find("tr").not(":eq(0)").each(function(){
				if(!$(this).find(":checkbox").is(":checked")){
					console.log("开始全选"+$(this).find("td:eq(1)").text());
					if(!($("#show_table").find("#"+$(this).find("td:eq(1)").text()).length>0)){
						var html="<tr id='"+$(this).find("td:eq(1)").text()+"'><td><input name='uids' value='"+$(this).find("td:eq(1)").text()+"'/></td><td>"+$(this).find("td:eq(2)").text()+"</td><td class='deluser'>删除</td></tr>"
						$("#show_table").append(html);
			//			console.log("未重复");
			//			var html=("<tr><td id='"+$(this).find("td:eq(2)").text()+"'>");
			//			$(this).children().not(":first,:last").each(function(){
			//		  	   		html+=($(this).text()+"--");
			//		  	 });	  	   			  	 	
			//		  	 $("#show_table").append(html+="</td></tr>");	
				//	}else{
				//		console.log("已重复");
					}
				  	 $(this).find("#addUser").css("color","blue").text("已选择");
				}
						  	   
			});	
			$("input[type=checkbox]").prop("checked",true);	  	 
		  }else{		  	 
		 // 	$("input[type=checkbox]").prop("checked",false);	
			$("tr").not(":eq(0)").each(function(){
			     
			     if($(this).find(":checkbox").is(":checked")){
				  	 $("#"+$(this).find("td:eq(1)").text()).remove();
				  	 $(this).find("#addUser").css("color","red").text("未选择");	
				}

			});		  	
		  	$("input[type=checkbox]").prop("checked",false); 
		  }	
		  if($("#show_table").html().length>0){
		     $("#unSelectedUsers").remove();
		  }else{
		     $("#show_select").append("<font class='unSelectedUsers' id='unSelectedUsers'><img src='<%=path %>/images/NoneData.png'/>暂时还没有选择用户！</font>");
		  }  
	  });
	  //点击某个复选框时，若此复选框为未选中状态则全选复选框取消选中
	  $("input[name^='selectedCheckbox']").click(function(){
		$("#selectAll").prop("checked",$("input[name^='selectedCheckbox']").length == $("input[name^='selectedCheckbox']:checked").length);
		$("input[name^='selectedCheckbox']:checked").length > 0 ? showMultiOper():hideMultiOper();	 
	  });
	  
	 $(document).delegate("#selectedCheckbox","click",function(){
	    //   var tr=$("#addUser").parent().parent().parent();  //选定#addUser无法确定是哪一个
	    //  var obj=$("#addUser");					//同理
	  		var trr=$(this).parent().parent();
	  		var obj=$(this).parent().parent().find(":last");
	  	   if($(obj).text()=="未选择"){
	              $(obj).css("color","blue").text("已选择");      
	             
	             if(!($("#show_table").find("#"+$(trr).find("td:eq(1)").text()).length>0)){
						var html="<tr id='"+$(trr).find("td:eq(1)").text()+"'><td><input name='uids' value='"+$(trr).find("td:eq(1)").text()+"'/></td><td>"+$(trr).find("td:eq(2)").text()+"</td><td class='deluser'>删除</td></tr>"
						$("#show_table").append(html);
					}
	             
	             /*  	   var html=("<li id='"+$(tr).find("td:eq(2)").text()+"'>");
			  	   $(tr).children().not(":first,:last").each(function(){
			  	   		html+=($(this).text()+"----");
			  	   });		  	   
			  	   $("#show_table").append(html+="</li>");
			  	    if($("#show_table").html().length > 0)	{
			  	    $("#unSelectedUsers").remove();
			  	   }	*/  	   
	  	   }else{
				   $(obj).css("color","red").text("未选择");
				   $(trr).find(":checkbox").prop("checked",false);
				//   $("#selectAll").prop("checked",false);
				   $("#"+$(trr).find("td:eq(1)").text()).remove();
				   if($("#show_table").html().length == 0){
				    $("#show_select").append("<font class='unSelectedUsers' id='unSelectedUsers'><img src='<%=path %>/images/NoneData.png'/>暂时还没有选择用户！</font>");
				    }	
			}
  	    });
	 
	 
	 
	 
	 
   	  //选中“未选择”，在左边显示已选用户，“未选择”变成“已选择”
  	   $(document).delegate("#addUser","click",function(){
	       var tr=$(this).parent().parent().parent();
	       var obj=this;
	  	   if($(obj).text()=="未选择"){
	              $(obj).css("color","blue").text("已选择");       
	              	if(!($("#show_table").find("#"+$(tr).find("td:eq(1)").text()).length>0)){
						var html="<tr id='"+$(trr).find("td:eq(1)").text()+"'><td><input name='uids' value='"+$(trr).find("td:eq(1)").text()+"'/></td><td>"+$(trr).find("td:eq(2)").text()+"</td><td class='deluser'>删除</td></tr>"
						$("#show_table").append(html);
					}       
			/*  	   var html=("<li id='"+$(tr).find("td:eq(2)").text()+"'>");
			  	   $(tr).children().not(":first,:last").each(function(){
			  	   		html+=($(this).text()+"----");
			  	   });		  	   
			  	   $("#show_table").append(html+="</li>");
			  	   */
			  	    if($("#show_table").html().length > 0)	{
			  	    $("#unSelectedUsers").remove();
			  	   }	  	   
	  	   }else{
				   $(obj).css("color","red").text("未选择");
				   $(tr).find(":checkbox").prop("checked",false);
				   $("#selectAll").prop("checked",false);
				   $("#"+$(tr).find("td:eq(1)").text()).remove();
				   if($("#show_table").html().length == 0){
				    $("#show_select").append("<font class='unSelectedUsers' id='unSelectedUsers'><img src='<%=path %>/images/NoneData.png'/>暂时还没有选择用户！</font>");
				    }	
			}
  	    });
  	    
  	    $(document).delegate(".deluser","click",function(){
  	    	$(this).parent().remove();
  	    	var userid = $(this).parent().attr("id");
  	    	var trr = $("#tab").find("#"+userid);
  	    	$(trr).find(":checkbox").prop("checked",false);
  	    	$(trr).find("#addUser").css("color","red").text("未选择");
  	    
  	    });
  	    	    
   /*******联动开始*********/ 
	$(function(){
		findAllAcademy('selectedAcademy');
		findAllMajor('', 'selectedMajor');
		findAllClass('', 'selectedClass')
	})
	 //异步查找所有学院
	function findAllAcademy(domId){
		$.ajax({
			type:"POST",
			dataType:"JSON",
			url:"<%=basePath%>biz/DataJson_FindAllAcademy.action",
			data:{"query":""},
			success:function(data){
			      //  data=JSON.parse(data);
                  //   alert();
					if(null  != data && undefined  !=data){
						for(var i = 0; i < data.length; i++){
							$("#"+domId+"").append("<option value='"+data[i].academyId+"'>"+data[i].academyName+"</option>");
						}
						 
					}
			}
		});
	}
	//异步查找已选学院的专业
	function findAllMajor(academyId , seleMajor){
		$.ajax({
			type:"POST",
			dataType:"JSON",
			url:"<%=basePath%>biz/DataJson_FindAllMajorByAcademy.action",
			data:{"query":JSON.stringify({"academyId":academyId})},
			success:function(data){
		     //   let json = JSON.parse(data)
				$("#"+seleMajor+"").find("option").remove();
				if(null  != data && undefined  != data){
					$("#"+seleMajor+"").append("<option value=''>请选择专业...</option>");
					for(var i = 0; i < data.length; i++){
						$("#"+seleMajor+"").append("<option value='"+data[i].majorId+"'>"+data[i].majorName+"</option>");
					}
					$("#"+seleMajor+"").change();
				}
			}
		});
	}
	//异步查找已选专业的班级
	function findAllClass(majorId , seleClass){
		$.ajax({
			type:"POST",
			dataType:"JSON",
			url:"<%=basePath%>biz/DataJson_FindAllClassByMajor.action",
			data:{"query":JSON.stringify({"majorId":majorId})},
			success:function(data){
			    //    let json=JSON.parse(data)
					$("#"+seleClass+"").find("option").remove();
					if(null  != data && undefined  != data){
						$("#"+seleClass+"").append("<option value=''>请选择班级...</option>");
						for(var i = 0; i < data.length; i++){
							$("#"+seleClass+"").append("<option value='"+data[i].classId+"'>"+data[i].className+"</option>");
						}									
						 $("#"+seleClass+"").change();
						
					}
			}
		});
	}
	//批量操作-已选学院改变事件
	 $("#selectedAcademy").change(function() {  
	 	findAllMajor($(this).find("option:selected").val(),'selectedMajor');
	 	$("input[name='selectedCheckbox']:checked").each(function(){
	 		var seleAcademyId = $("#selectedAcademy option:selected").val();
	 		var seleAcademyName = $("#selectedAcademy option:selected").text();
	 		$(this).parent().nextAll().children("input[name^='academyId']").val(seleAcademyId);
	 		$(this).parent().nextAll().children("input[name^='academyName']").val(seleAcademyName);
	 		//将批量操作的学院下拉列表添加到当前行的下拉列表
	 		var dom = $(this).parent().nextAll().children("input[name^='academyId']").next();
	 		dom.find("option").remove();
	 		$("#selectedAcademy").find("option").each(function(){
	 			var newOption = "<option value="+$(this).val()+">"+$(this).text()+"</option>";
	 			dom.append(newOption);
	 		});
	 	});
	}); 
	//批量操作-已选专业改变事件
	 $("#selectedMajor").change(function() {  
	 	findAllClass($(this).find("option:selected").val(),  'selectedClass');
	 	$("input[name='selectedCheckbox']:checked").each(function(){
	 		var seleMajorId = $("#selectedMajor option:selected").val();
	 		var seleMajorName = $("#selectedMajor option:selected").text();
	 		$(this).parent().nextAll().children("input[name^='majorId']").val(seleCabinetCode);
	 		$(this).parent().nextAll().children("input[name^='majorName']").val(seleCabinetName);
	 		var dom = $(this).parent().nextAll().children("input[name^='majorId']").next();
	 		dom.find("option").remove();
	 		$("#selectedMajor").find("option").each(function(){
	 			var newOption = "<option value="+$(this).val()+">"+$(this).text()+"</option>";
	 			dom.append(newOption);
	 		});
	 	});
	}); 
	//批量操作-已选班级改变事件
	 $("#selectedClass").change(function() {
	 	$("input[name='selectedCheckbox']:checked").each(function(){
	 		var seleClassId = $("#selectedClass option:selected").val();
	 		var seleClassName = $("#selectedClass option:selected").text();
	 		$(this).parent().nextAll().children("input[name^='classId']").val(seleClassId);
	 		$(this).parent().nextAll().children("input[name^='className']").val(seleClassName);
	 		//将批量操作的盒子下拉列表添加到当前行的下拉列表
	 		var dom = $(this).parent().nextAll().children("input[name^='classId']").next();
	 		dom.find("option").remove();
	 		$("#selectedClass").find("option").each(function(){
	 			var newOption = "<option value="+$(this).val()+">"+$(this).text()+"</option>";
	 			dom.append(newOption);
	 		});

	 	});
	});
}); 
	/*******联动结束*********/ 
	//查找所有科室
	$(function(){
		findAllStudio('selectedStudio');
	})
	function findAllStudio(domId){
		$.ajax({
			type:"POST",
			dataType:"JSON",
			url:"<%=basePath%>biz/DataJson_findAllStudio.action",
			data:{"query":""},
			success:function(data){
					if(null  != data && undefined  !=data){
						for(var i = 0; i < data.length; i++){
							$("#"+domId+"").append("<option value='"+data[i].studioId+"'>"+data[i].studioName+"</option>");
						}
						 
					}
			}
		});
	}
	
	/*******传值开始*********/ 
			$(document).delegate(".btn","click",function(){
			var AcaVar = $('#selectedAcademy').val();
			var MajVar = $('#selectedMajor').val();
			var ClaVar = $('#selectedClass').val();
			var StudioVar = $('#selectedStudio').val();
			console.log(AcaVar+","+MajVar+","+ClaVar+","+StudioVar);
			var params={"AcaVar":AcaVar,"MajVar":MajVar,"ClaVar":ClaVar,"StudioVar":StudioVar}
			 $.post("<%=basePath%>biz/SysUser_Querydata.action",params,function(data){
			     $("#showEarch").empty();
			     $("#selectAll").removeAttr("checked");
			        if( null != data && undefined != data){
			           for(var i = 0;i <data.length; i++){
			              $("#showEarch").append("<tr>"+
												        "<td><input  name='selectedCheckbox' type='checkbox' value='"+data[i].userId+"' id='selectedCheckbox'/></td>"+
												        "<td><front id='"+data[i].userId+"'>"+data[i].userId+"</front></td>"+
												        "<td><front id='"+data[i].userName+"'>"+data[i].userName+"</front></td>"+
												        "<td>"+data[i].userType+"</td>"+
												        "<td>"+data[i].userCollege+"</td>"+
												        "<td>"+data[i].userMajor+"</td>"+
												        "<td>"+data[i].userClass+"</td>"+      
												        "<td>"+data[i].userStudio+"</td>"+
												        "<td><a href='#'><font id='addUser' color='red'>未选择</font></a></td>"+
									            "</tr>");		           
			           }
			        
			        }
			        if(data == ""){
			            alert("目前暂时没有符合条件的数据");
			        }
			        
			}); 	
			
		});
	/*******传值结束*********/ 
	/******确定发布，提交数据开始*/

/*	$(document).delegate("#is_publish","click",function(){
		alert("点击了提交");
	   $("#addUsertablelist tr:gt(0)").each(function(a){
	    $(this).children("td").each(function(a){
	        console.log("第"+a+"个td的内容："+$(this).text());
	        if(a==2){
		        var userid = $(this).text();
		        var params = {"userid":userid};
		        $.post("<%=basePath%>biz/SysUser_Submitdata.action",params,function(data){});
	        }
	        
	    });
   });
});
*/
	/******确定发布，提交数据结束*/

</script>

</head>
<body>
	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">表格管理</a></li>
    <li><a href="#">发布任务</a></li>
    </ul>
    </div>
    <div class="pos-a" style="position:absolute;width:400px;right:0;top:60; bottom:0; height:92%; border-right:1px solid #e5e5e5; background-color:#f5f5f5" id="addUser2">
		<form action="<%=basePath%>biz/ServiceTask_addWriter.action" method="post">
		同时发送给联系人<input type="radio" name="inBranch"/>
		<front class="selectedUsers">已选择用户预览：</front>
		<br/>
		<br/>
		<!-- <table class="addUsertablelist" id="addUsertablelist"><th>已选用户名称</th><th>已选用户账号</th></table> -->
		<input name="serviceTask.taskId" type="hidden" value="${serviceTask.taskId }"/>
		<div id="show_select" class="newdiv">
	<!-- <font class="unSelectedUsers" id="unSelectedUsers"><img src="<%=path %>/images/NoneData.png"/>暂时还没有选择用户！</font> -->	
		<table id="show_table" id="addUsertablelist" class="tablelist"><tr><th>已选用户名称</th><th>已选用户账号</th><th>操作</th></tr>
		
		</table>		
		</div>
		<input type="submit" value="确定发布" class="newbtn" id="is_publish"/>
		</form>
	</div>
		<a href="#" target="rightFrame" id="t"></a>
	<div style="margin-right:400px;">
    
<div class="formbody">
    <div id="usual1" class="usual">
      <div id="tab2" class="tabson">
        
     	<form method="post"  target="rightFrame">
    	<ul class="seachform">
          <li><label>选择学院:
    	    <select name="selectedAcademy"id="selectedAcademy" class="scinput">								 
						<option value="">请选择学院 ...</option>					
						</select>
						</label>
		 <li>
		 <li><label>选择专业:
    	    <select name=""id="selectedMajor" class="scinput">										 
						<option value="">请选择专业...</option>					
						</select>
						</label>
		 <li>
		 <li><label>选择班级:
    	    <select name=""id="selectedClass" class="scinput">										 
						<option value="">请选择班级... </option>					
						</select>
						</label>
		 <li>
		 <li><label>选择科室:
    	    <select name=""id="selectedStudio" class="scinput">										 
						<option value="">请选择科室... </option>					
						</select>
						</label>
		 <li>
			
        <li><input name="" type="button" class="btn" id ="btn" value="查询"/>
        </li>
        </ul>
        </form>
        
    <table class="tablelist" id="tab">
    
    	<thead>
    	<tr>
        <th><input  name="selectAll" id="selectAll" type="checkbox"  class="sort" style="margin-left: 4px;"/>全选</th>
        <th>&nbsp;&nbsp;&nbsp;用户id</th>
        <th>&nbsp;&nbsp;&nbsp;用户名称</th> 
        <th>&nbsp;&nbsp;&nbsp;用户角色</th>
        <th>&nbsp;&nbsp;&nbsp;用户所在学院</th>
        <th>&nbsp;&nbsp;&nbsp;用户所学专业</th>
        <th>&nbsp;&nbsp;&nbsp;用户所在班级</th>
        <th>&nbsp;&nbsp;&nbsp;所属部门</th>
        <th>&nbsp;&nbsp;&nbsp;操作</th>
      
        </thead>
        <tbody id="showEarch">
        <front id="ShowInfo">
        <s:iterator value="SysUserList">
        <tr id="${userId}">
        <td><input  name="selectedCheckbox" type="checkbox" value="${userId}" id="selectedCheckbox"/></td>
        <td><front id="userId">${userId}</front></td>
        <td><front id="userName">${userName}</front></td>
        <td>
        <c:choose>
        <c:when test="${userType == 0}">学生</c:when>
         <c:when test="${userType == 1}">教师</c:when>
        </c:choose> </td>
        <td>${userCollege}</td>
        <td>${userMajor}</td>
        <td>${userClass}</td>   
        <td>${userStudio}</td>   
        <td><a href="#"><font id="addUser" color="red">未选择</font></a></td>
        </tr> 
        </s:iterator>
        </tbody>
    </table>
  </div>  
       
	</div>

</body>

</html>
